<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SVG实现的滤镜效果</title>
</head>
<body>
  <svg width="300" height="500">
    <defs>
      <filter id="Linear" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
        <feComponentTransfer>
          <feFuncR type="linear" slope="0" intercept="0"/>
          <feFuncG type="linear" slope="1" intercept="0"/>
          <feFuncB type="linear" slope="1" intercept="0"/>
        </feComponentTransfer>
      </filter>
    </defs>
    <image x="0" y="0" width="300" height="200" xlink:href="./1.jpg" />
    <image x="0" y="200" width="300" height="200" xlink:href="./1.jpg" filter="url(#Linear)"  />
  </svg>
</body>
</html>